<template>
  <nav class="navbar">
    <div class="container">
      <!-- 左侧：Logo -->
      <router-link to="/" class="logo">
        <span class="logo-icon">📚</span>
        <span class="logo-text">校园二手</span>
      </router-link>
      
      <!-- 中间：导航链接 -->
      <div class="nav-links">
        <router-link to="/">首页</router-link>
        <router-link to="/publish">发布商品</router-link>
        <router-link to="/profile">个人中心</router-link>
      </div>
      
      <!-- 右侧：搜索框 + 用户区域 -->
      <div class="right-section">
        

      <div class="search-bar">
        <input 
          type="text" 
          placeholder="搜索商品..." 
          class="search-input"
          v-model="searchQuery"
          @keyup.enter="performSearch" 
        >
        <button class="search-btn" @click="performSearch">🔍</button> <!-- 点击搜索 -->
      </div>
        
        <div class="user-section">
          <div v-if="user.isLoggedIn" class="user-info">
            <span class="user-name">你好, {{ user.name }}</span>
            <button class="logout-btn" @click="handleLogout">登出</button>
          </div>
          <router-link v-else to="/login" class="login-btn">登录</router-link>
        </div>
      </div>
    </div>
  </nav>
</template>

<script>
import { inject, ref } from 'vue'
import { useRouter } from 'vue-router'

export default {
  name: 'NavBar',
  setup() {
    const user = inject('user')
    const router = useRouter()
    const searchQuery = ref('') // 添加搜索查询状态

    const handleLogout = () => {
      user.logout()
      window.location.href = '/'
    }

    // 添加搜索功能
    const performSearch = () => {
      if (searchQuery.value.trim()) {
        router.push({ path: '/search', query: { q: searchQuery.value } })
        searchQuery.value = '' // 清空搜索框
      }
    }

    return {
      user,
      searchQuery, // 暴露搜索查询状态
      handleLogout,
      performSearch // 暴露搜索方法
    }
  }
}
</script>

<style scoped>
/* ===== 基础导航栏样式 ===== */
/* ===== 基础导航栏样式 ===== */
.navbar {
  background-color: var(--primary-color); /* 使用主题主色作为背景 */
  color: white;                          /* 文字白色 */
  padding: 15px 0;                       /* 上下内边距15px */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 添加轻微阴影提升层次感 */
  position: sticky;                      /* 粘性定位 */
  top: 0;                                /* 固定在顶部 */
  z-index: 1000;                         /* 高z-index确保在其他内容之上 */
}

/* 导航栏容器 - 控制内部元素布局 */
.container {
  display: flex;                         /* 弹性布局 */
  justify-content: space-between;        /* 两端对齐 */
  align-items: center;                   /* 垂直居中 */
  max-width: 1200px;                     /* 最大宽度限制 */
  margin: 0 auto;                        /* 水平居中 */
  padding: 0 20px;                       /* 左右内边距 */
  flex-wrap: wrap;                       /* 允许内容换行 */
}

/* ===== Logo 样式 ===== */
.logo {
  display: flex;                         /* 弹性布局 */
  align-items: center;                   /* 垂直居中 */
  text-decoration: none;                 /* 去除下划线 */
  color: white;                          /* 白色文字 */
  font-size: 1.2rem;                     /* 字体大小 */
  font-weight: bold;                     /* 粗体 */
  margin-right: 30px;                    /* 右侧外边距 */
}

/* Logo图标样式 */
.logo-icon {
  margin-right: 8px;                     /* 图标右侧间距 */
  font-size: 1.4rem;                     /* 图标比文字稍大 */
}

/* ===== 导航链接样式 ===== */
.nav-links {
  display: flex;                         /* 弹性布局 */
  gap: 25px;                             /* 链接间间距 */
  flex: 1;                               /* 占据剩余空间 */
  justify-content: center;               /* 水平居中 */
}

/* 导航链接基础样式 */
.nav-links a {
  color: rgba(255, 255, 255, 0.9);       /* 半透明白色 */
  text-decoration: none;                 /* 去除下划线 */
  padding: 8px 12px;                     /* 内边距 */
  border-radius: var(--border-radius);   /* 圆角 */
  transition: all 0.3s;                  /* 过渡动画 */
  font-weight: 500;                      /* 中等字重 */
}

/* 链接悬停效果 */
.nav-links a:hover {
  background-color: rgba(255, 255, 255, 0.1); /* 轻微背景色变化 */
}

/* 当前激活路由链接样式 */
.nav-links a.router-link-active {
  background-color: rgba(255, 255, 255, 0.15); /* 更明显的背景色 */
  color: white;                          /* 纯白色文字 */
}

/* ===== 右侧区域样式 ===== */
.right-section {
  display: flex;                         /* 弹性布局 */
  align-items: center;                   /* 垂直居中 */
  gap: 20px;                             /* 子元素间距 */
  margin-left: auto;                     /* 自动左外边距(靠右对齐) */
}

/* 搜索框容器 */
.search-bar {
  display: flex;                         /* 弹性布局 */
  background: rgba(255, 255, 255, 0.15); /* 半透明背景 */
  border-radius: var(--border-radius);   /* 圆角 */
  overflow: hidden;                      /* 隐藏溢出内容 */
  transition: all 0.3s;                  /* 过渡动画 */
}

/* 搜索框获得焦点时的样式 */
.search-bar:focus-within {
  background: rgba(255, 255, 255, 0.25); /* 加深背景色 */
}

/* 搜索输入框样式 */
.search-input {
  background: transparent;              /* 透明背景 */
  border: none;                         /* 无边框 */
  padding: 8px 15px;                    /* 内边距 */
  color: white;                         /* 白色文字 */
  width: 180px;                         /* 固定宽度 */
  outline: none;                        /* 去除聚焦轮廓 */
}

/* 搜索框占位符样式 */
.search-input::placeholder {
  color: rgba(255, 255, 255, 0.7);      /* 半透明白色 */
}

/* 搜索按钮样式 */
.search-btn {
  background: transparent;              /* 透明背景 */
  border: none;                         /* 无边框 */
  color: white;                         /* 白色图标 */
  padding: 8px 12px;                    /* 内边距 */
  cursor: pointer;                      /* 手型指针 */
  transition: all 0.3s;                 /* 过渡动画 */
}

/* 搜索按钮悬停效果 */
.search-btn:hover {
  background: rgba(255, 255, 255, 0.2); /* 轻微背景变化 */
}

/* ===== 用户区域样式 ===== */
.user-section {
  display: flex;                         /* 弹性布局 */
  align-items: center;                   /* 垂直居中 */
}

/* 用户信息容器 */
.user-info {
  display: flex;                         /* 弹性布局 */
  align-items: center;                   /* 垂直居中 */
  gap: 15px;                             /* 子元素间距 */
}

/* 用户名样式 */
.user-name {
  color: white;                          /* 白色文字 */
  font-weight: 500;                      /* 中等字重 */
  white-space: nowrap;                   /* 防止换行 */
}

/* 登出按钮样式 */
.logout-btn {
  background: rgba(255, 255, 255, 0.2); /* 半透明背景 */
  border: 1px solid rgba(255, 255, 255, 0.3); /* 半透明边框 */
  color: white;                         /* 白色文字 */
  padding: 6px 12px;                    /* 内边距 */
  border-radius: var(--border-radius);  /* 圆角 */
  cursor: pointer;                      /* 手型指针 */
  transition: all 0.3s;                 /* 过渡动画 */
  font-weight: 500;                     /* 中等字重 */
}

/* 登出按钮悬停效果 */
.logout-btn:hover {
  background: rgba(255, 255, 255, 0.3); /* 加深背景色 */
}

/* 登录按钮样式 */
.login-btn {
  background: var(--secondary-color);   /* 使用主题次色 */
  color: white;                         /* 白色文字 */
  padding: 8px 15px;                    /* 内边距 */
  border-radius: var(--border-radius);  /* 圆角 */
  text-decoration: none;                /* 去除下划线 */
  font-weight: 500;                     /* 中等字重 */
  transition: all 0.3s;                 /* 过渡动画 */
  white-space: nowrap;                  /* 防止换行 */
}

/* 登录按钮悬停效果 */
.login-btn:hover {
  background: #e69500;                  /* 悬停时更亮的橙色 */
}

/* ===== 响应式设计 ===== */
/* 中等屏幕尺寸(992px以下)适配 */
@media (max-width: 992px) {
  .nav-links {
    gap: 15px;                          /* 缩小导航链接间距 */
  }
  
  .search-input {
    width: 140px;                       /* 缩小搜索框宽度 */
  }
}

/* 平板尺寸(768px以下)适配 */
@media (max-width: 768px) {
  .container {
    flex-direction: column;             /* 垂直排列 */
    align-items: stretch;               /* 拉伸对齐 */
    gap: 15px;                          /* 元素间距 */
  }
  
  .logo {
    margin-right: 0;                    /* 去除右边距 */
    justify-content: center;            /* 居中显示 */
  }
  
  .nav-links {
    order: 3;                           /* 调整显示顺序为第三位 */
    margin-top: 15px;                   /* 顶部外边距 */
    justify-content: space-around;      /* 分散对齐 */
  }
  
  .right-section {
    order: 2;                           /* 调整显示顺序为第二位 */
    margin-top: 10px;                   /* 顶部外边距 */
    justify-content: center;            /* 居中显示 */
    width: 100%;                        /* 全宽 */
  }
  
  .search-bar {
    flex: 1;                            /* 占据可用空间 */
    max-width: 400px;                   /* 最大宽度限制 */
  }
}

/* 手机尺寸(480px以下)适配 */
@media (max-width: 480px) {
  .nav-links {
    flex-wrap: wrap;                    /* 允许链接换行 */
  }
  
  .user-info {
    flex-direction: column;             /* 垂直排列 */
    gap: 8px;                           /* 缩小间距 */
  }
}
</style>